<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>YqWinPlus UMD模块测试</title>
  <!-- 引入 Element Plus CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus@2.12.0/dist/index.css">
  <!-- 引入 YQWIN-Plus CSS -->
  <link rel="stylesheet" href="/dist/yqwin-plus.css">
</head>
<body>
  <div id="app">
    <h1>YqWinPlus UMD模块测试</h1>
    <p>使用 UMD 模块方式引入 YQWIN-Plus 组件库</p>
    
    <div class="test-section">
      <h2>基础用法</h2>
      <yq-select v-model="selectedValue" placeholder="请选择选项">
        <yq-option label="选项1" value="option1"></yq-option>
        <yq-option label="选项2" value="option2"></yq-option>
        <yq-option label="选项3" value="option3"></yq-option>
      </yq-select>
      <p>选中值: {{ selectedValue }}</p>
    </div>
  </div>

  <!-- 引入 Vue -->
  <script src="https://unpkg.com/vue@3.3.13/dist/vue.global.js"></script>
  <!-- 引入 Element Plus -->
  <script src="https://unpkg.com/element-plus@2.12.0/dist/index.full.js"></script>
  <!-- 引入 YQWIN-Plus UMD 模块 -->
  <script src="/dist/yqwin-plus.umd.js"></script>

  <script>
    const { createApp } = Vue;
    
    createApp({
      data() {
        return {
          selectedValue: ''
        }
      }
    })
    .use(ElementPlus)
    .use(YqWinPlus)
    .mount('#app');
  </script>
</body>
</html>